<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers Cache Write Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="../lib/OpenLayers.js"></script>
    <script>OpenLayers.Console = window.console || OpenLayers.Console;</script>
    <script src="cache-write.js"></script>
  </head>
  <body onload="init()">
    <h1 id="title">Cache Write Example</h1>

    <div id="tags">
        mobile, local storage, persistence, cache, html5
    </div>

    <div id="shortdesc">Caching viewed tiles</div>

    <div id="map" class="smallmap"></div>
    <div>Cache status: <span id="status"></span></div>
    <div><button id="clear">Clear cache</button></div>
    <br>
    <div id="docs">
        <p>This example shows how to use the CacheWrite control to cache the
        tiles. Caching is turned on, and as you pan and zoom the map, every
        tile that is loaded is also copied to the browsers Local Storage.</p>
        <p>To use the cached tiles, switch to the
        <a href="cache-read.html">cache-read.html</a> example.</p>
        <p>See <a href="cache-write.js">cache-write.js</a> for the source
        code.</p>
    </div>
  </body>
</html>
